<template>
  <div>
    <a-affix :offset-top="top">
    <a-menu class="-round" v-model="current" mode="horizontal">
      <a-menu-item key="Home"> <a-icon type="home" />站点主页</a-menu-item>
      <a-menu-item key="Notice"> <a-icon type="notification" />通知公告</a-menu-item>
      <a-sub-menu>
        <span slot="title" class="submenu-title-wrapper"
        ><a-icon type="user" />用户中心</span
        >
        <a-menu-item-group title="订单">
          <a-menu-item key="History">
            历史订单
          </a-menu-item>
          <a-menu-item key="FeedBack">
            投诉反馈
          </a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group title="服务">
          <a-menu-item key="Info">
            我的资料
          </a-menu-item>
          <a-menu-item key="Wallet">
            我的钱包
          </a-menu-item>
        </a-menu-item-group>
        <a-menu-item-group title="状态">
          <a-menu-item v-if="!this.$store.state.is_login" key="Login">
            用户登录
          </a-menu-item>
          <a-menu-item v-else key="Exit">
            用户退出
          </a-menu-item>
        </a-menu-item-group>
      </a-sub-menu>
      <a-menu-item key="alipay">

        <div style="display: inline"><a href="https://www.xyde.net.cn" target="_blank" rel="noopener noreferrer"
        ><a-icon type="smile" />关于我们</a
        ></div>
      </a-menu-item>

    </a-menu>
    </a-affix>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class HeaderNav extends Vue{
  top = 10



  private get current(){
    let arr: string[] = []
    arr.push(''+this.$route.name)
    return arr
  }

  private set current(value:string[]){
    this.$router.push({name:value[0]})
  }
  //
  // private selected(item:{name: string,key: string,selectedKeys: string[]}){
  //
  // }
}
</script>

<style scoped>
  .-round{
    border-radius:25px;
    box-shadow: 0 2px 6px grey;
  }
</style>
